<extend name="Common@Layout:layui-admin"/>
<block name="title"><title>编辑JSON</title></block>
<block name="style">
<css href="/Public/jsoneditor/jsoneditor.min.css" />
<style>
code {
  background-color: #f5f5f5;
}
.layui-fixbar{display:none;}
#jsoneditor {
	width: 700px;
	height: 500px;
	font: 10.5pt arial;
	color: #4d4d4d;
	line-height: 150%;
}
</style>
</block>

<block name="main">
	<div class="layui-main" style="width:auto">
		<form class="layui-form close-dialog" action="{:U('edit_post')}" method="post" style="margin-top:20px;">
			<div class="layui-form-item">
			    <label class="layui-form-label">Key：</label>
			    <div class="layui-input-block">
			      <input type="text" name="key" value="{$info.key}" lay-verify="required" placeholder="请输入索引的Key（尽量唯一）" autocomplete="off" class="layui-input" style="width:300px;display:inline-block;">
			    </div>
			    
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">描述：</label>
			    <div class="layui-input-block">
			      <input type="text" name="desc" value="{$info.desc}" lay-verify="required" placeholder="请输入这个Json的描述" autocomplete="off" class="layui-input" style="width:300px;display:inline-block;">
			      <a class="layui-btn" id="saveBtn" style="margin-left:30px;">保存</a>
			    </div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">Json</label>
				<div class="layui-input-block">
			    	<div id="jsoneditor"></div>
			    </div>
			</div>
			<input type="hidden" name="id" value="{$info.id}">
			<input type="hidden" id="jsonInput" name="json" value="{$info.json}">
		</form>
	</div>
</block>


<block name="script">
<js href="/Public/jsoneditor/jsoneditor.min.js" />
<script>
var container = document.getElementById('jsoneditor');
var options = {
  mode: 'code',
};

var json = {$info.json};
//json = JSON.parse(json);
var editor = new JSONEditor(container, options, json);

layui.use(['jquery'],function(){
	var $ = layui.jquery;
	$('#saveBtn').click(function(){
		$('#jsonInput').val(JSON.stringify(editor.get()));
		layui.miniweb.formSubmit($('form'));
	});
});
</script>
</block>